<template>
  <div class="commodity-detail">
    <!-- 商品图片区域 -->
    <div class="image-section">
      <el-image 
        :src="commodity.coverUri" 
        :preview-src-list="[commodity.coverUri]"
        fit="cover"
        class="main-image"
      >
        <template #error>
          <div class="image-error">
            <el-icon><Picture /></el-icon>
          </div>
        </template>
      </el-image>
    </div>

    <!-- 商品基本信息 -->
    <div class="info-section">
      <h2>{{ commodity.name }}</h2>
      
      <div class="meta-info">
        <el-tag :type="commodity.enabled ? 'success' : 'danger'">
          {{ commodity.enabled ? '启用' : '停用' }}
        </el-tag>
        <span class="category">{{ commodity.category?.name || '未分类' }}</span>
      </div>

      <div class="price-section">
        <div class="price-item">
          <span class="label">零售价：</span>
          <span class="value">{{ commodity.retailPrice?.value || 0 }} 元</span>
        </div>
        <div class="price-item">
          <span class="label">批发价：</span>
          <span class="value">{{ commodity.wholesalePrice?.value || 0 }} 元</span>
        </div>
      </div>
    </div>

    <!-- 商品规格 -->
    <div class="spec-section" v-if="commodity.multiStandard">
      <h3>商品规格</h3>
      <el-table :data="commodity.subCommodityList" border>
        <el-table-column label="规格" prop="standard" width="150"></el-table-column>
        <el-table-column label="零售价" width="120">
          <template #default="scope">
            {{ scope.row.retailPrice?.value || 0 }} 元
          </template>
        </el-table-column>
        <el-table-column label="批发价" width="120">
          <template #default="scope">
            {{ scope.row.wholesalePrice?.value || 0 }} 元
          </template>
        </el-table-column>
        <el-table-column label="库存" prop="count.value" width="100"></el-table-column>
      </el-table>
    </div>

    <!-- 商品描述 -->
    <div class="desc-section" v-if="commodity.remark">
      <h3>商品描述</h3>
      <div class="desc-content">{{ commodity.remark }}</div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-section">
      <el-button type="primary" @click="handleEdit">编辑商品</el-button>
      <el-button @click="goBack">返回列表</el-button>
    </div>
  </div>
</template>

<script>
import { Picture } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {CommodityUiAction} from '../../public/engine/uiAction/commodityUiAction'

export default {
  name: 'CommodityDetail',
  components: {
    Picture
  },
  data() {
    return {
      commodity: {
        id: '',
        name: '',
        coverUri: '',
        enabled: true,
        category: {},
        retailPrice: { value: 0 },
        wholesalePrice: { value: 0 },
        remark: '',
        multiStandard: false,
        subCommodityList: []
      },

      commodityUiAction : new CommodityUiAction(),
    }
  },
  methods: {
    async fetchData() {
      try {
      
        const res = await this.commodityUiAction.getCommodityDetailInfo("123");

        if (res) {
          this.commodity = res
        }
      } catch (error) {
        ElMessage.error('获取商品详情失败')
        console.error(error)
      }
    },
    handleEdit() {
      this.$router.push(`/commodities/edit/${this.commodity.id}`)
    },
    goBack() {
      this.$router.go(-1)
    }
  },
  mounted() {
    this.fetchData()
  }
}
</script>

<style scoped>
.commodity-detail {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.image-section {
  margin-bottom: 20px;
  text-align: center;
}

.main-image {
  width: 300px;
  height: 300px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.info-section {
  margin-bottom: 30px;
}

.info-section h2 {
  font-size: 24px;
  margin-bottom: 15px;
  color: #333;
}

.meta-info {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.category {
  color: #666;
}

.price-section {
  background: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
}

.price-item {
  display: flex;
  margin-bottom: 10px;
}

.price-item .label {
  width: 80px;
  color: #666;
}

.price-item .value {
  font-weight: bold;
  color: #e6a23c;
}

.spec-section, .desc-section {
  margin-bottom: 30px;
}

.spec-section h3, .desc-section h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.desc-content {
  line-height: 1.6;
  color: #666;
}

.action-section {
  text-align: center;
  margin-top: 30px;
}

.image-error {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  color: #c0c4cc;
}
</style>